<template>
    <tui-sticky :scrollTop="scrollTop" stickyTop="0" @sticky="sticky" stickyHeight="80rpx">
        <template v-slot:header>
            <view class="m-ticky-tab-box">
                <tui-tabs
                    :tabs="tabs"
                    :currentTab="currentTab"
                    @change="change"
                    :selectedColor="color"
                    :sliderBgColor="color"
                    :width="tuiTabWidth"
                ></tui-tabs>
            </view>
        </template>
    </tui-sticky>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
const props = defineProps({
    tabs: { type: Array<{ name: string }>, default: [] },
    tabWidth: Number,
    tabFixed: Boolean
})
const scrollTop = ref(0)
const tuiTabWidth = ref(props.tabWidth)
let windowWidth = 0
uni.getSystemInfo({
    success: (res) => {
        windowWidth = res.windowWidth
    }
})
type stickyDataType = {
    isFixed: boolean //是否吸顶
    index: number
}
const emit = defineEmits<{
    (e: 'tabChange', index: number): void
    (e: 'sticky', data: stickyDataType): void
}>()
const currentTab = ref(0)
const color = ref('#18bc37')

function change(e: { index: number }) {
    currentTab.value = e.index
}
watch(currentTab, (newValue) => {
    emit('tabChange', newValue)
})
function stick(pos: number) {
    scrollTop.value = pos
}
function sticky(data: stickyDataType) {
    if (data.isFixed) {
        tuiTabWidth.value = windowWidth
    } else {
        tuiTabWidth.value = props.tabWidth
    }
    emit('sticky', data)
}
defineExpose({
    stick
})
</script>

<style lang="scss" scoped></style>
